---
import Socials from "../content/Socials.astro"
export interface Props {
	fullname: string
	position: string
}
const { fullname, position } = Astro.props
---

<header class="cv__header">
	<div class="header__text">
		<h1>{fullname}</h1>
		<p>{position}</p>
	</div>
	<div class="vertical-line"></div>
	<Socials />
</header>

<style>
	@media (width >= 630px) {
		.cv__header {
			display: grid;
			grid-template-columns: 1fr auto var(--second-column-width);
		}
	}
	@media (width < 630px) {
		.cv__header .vertical-line {
			height: 1px;
			width: 100%;
			margin: var(--gap, 1em) 0;
			border-bottom-style: solid;
		}
	}
	.header__text {
		display: grid;
		align-self: center;
		gap: 0.5em;
	}
	h1 {
		margin: 0;
		color: var(--accent-color, currentColor);
		font-weight: 900;
		font-size: 2.2em;
		line-height: 1;
	}
	p {
		margin: 0;
	}
</style>
